<template>
  <div class="detailPageCss">
    <div class="bodyCss">
      <div class="userInfoCss">
        <div class="userImgCss">
          <el-image :src="formData.data1" :fit="'cover'" style="height:100%;width:100%;"></el-image>
        </div>
        <div class="infoTableCss">
          <table border="1">
            <tbody>
              <tr>
                <td class="tableLabelCss">姓名</td>
                <td>张三</td>
              </tr>
              <tr>
                <td class="tableLabelCss">性别</td>
                <td>女</td>
              </tr>
              <tr>
                <td class="tableLabelCss">身份证号</td>
                <td>3589632145874521569</td>
              </tr>
              <tr>
                <td class="tableLabelCss">证书编号</td>
                <td>56156156113178456517478</td>
              </tr>
              <tr>
                <td class="tableLabelCss">签发日期</td>
                <td>2021-01-01</td>
              </tr>
              <tr>
                <td class="tableLabelCss">是否多点执业</td>
                <td>是</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      formData:{
        data1:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        data2:null,
        data3:null,
      },
      tableData:[],
      data3Map:{
        0:'是',
        1:'否',
        2:'/'
      },
      data4Map:{
        0:'是',
        1:'否',
        2:'/'
      },
      tableData2:[],
    }
  },
  mounted(){
    this.getList()
  },
  methods:{
    deleteBtn(){

    },
    configBtn(){
      
    },
    getList(){
      const random = Math.floor( Math.random() * 3) + 10
      this.tableData = []
      for( let i=0;i<random ; i++){
        const random1 = Math.floor( Math.random() * 3)
        const random2 = Math.floor( Math.random() * 3)
        this.tableData.push({
          data3: random1,
          data4: random2,
          data2: '【测试数据】xxxx地址',
          data1: '【测试数据】xxxx医院'
        })

        this.tableData2.push({
          data2: '【测试数据】xxxx医院',
          data1: '【测试数据】xxxx医院',
          data3: this.getCurrentDay()
        })
      }
    },
    getCurrentDay(){
      const currentDate = new Date()
      const year = currentDate.getFullYear()
      const month = (currentDate.getMonth() + 1).toString().padStart(2, '0')
      const day = currentDate.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    goBackBtn(){
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.detailPageCss{
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  padding-right: 0;
  border-radius: 10px;
  height: calc( 100vh - 66px - 40px);
  display: flex;
  flex-direction: column;
  .bodyCss{
    margin-left: 10px;
    width: calc( 100% - 10px );
    height: calc( 100% - 60px);
    padding-right: 20px;
    overflow-y: auto;
    .userInfoCss{
      display: flex;
      .userImgCss{
        width: 240px;
        height: 308px;
      }
      .infoTableCss{
        margin-left: 10px;
        width: calc( 100% - 200px - 10px);
        table {
          border-collapse: collapse;
          width: 100%;
          line-height: 34px;
          &:not(:first-child){
            margin-top: 15px;
          }
          .tableLabelCss{
            font-weight: bold;
          }
        }
        th, td {
          border: 1px solid black;
          padding: 8px;
          text-align: left;
        }
        td:nth-child(odd) {
            width: 30%;
        }
        td:nth-child(even) {
            width: 70%;
        }
        th {
          background-color: #f2f2f2;
        }
        tr:last-child td {
          border-bottom: none;
        }
        td:nth-child(2) {
          border-right: none;
        }
      }
    }
  }
  .bottomBtnCss{
    margin-right: 20px;
    margin-top: auto;
    text-align: right;
  }
}
</style>